<script setup>
import SonSonCom from './SonSonCom.vue'

// 子组件通过 props 接收父组件传递的数据
const props = defineProps({
  msg: {
    type: String,
    required: true
  }
})

// 1. 定义 emit
const emit = defineEmits(['update:msg'])
const sendMsg = ()=>{
  // this.$emit('update:msg')
  // 2. 调用 emit，发送消息(触发事件)
  emit('update:msg', '🐶子组件->' + props.msg)
}

const myMsg = '子组件自己内部的数据'
const validate = ()=>{
  alert('🐵调用内部的表单校验')
}

// 默认情况下，通过模板引用取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。
// 需要通过 defineExpose 主动暴露后，父组件才能调用组件的方法
defineExpose({
  myMsg,
  validate
})
</script>

<template>
  <!-- 结构 -->
  <div class="son">
    <h2>子组件</h2>
    <p>{{ msg }}</p>
    <button @click="sendMsg">点击发送消息</button>

    <SonSonCom />
  </div>
</template>

<style scoped>
  .son{
    border: 5px solid gold;
  }
</style>
